Skip to content

Conversation

@jayyaj12
Copy link

@jayyaj12 jayyaj12 commented Jan 14, 2026

Summary

Fix corner morph animation interruption in MaterialButtonGroup while maintaining the performance optimization from ea9d250.

Problem

After ea9d250, corner animations are interrupted during state changes because onBoundsChange() always skips animations.

Solution

Instead of simply reverting ea9d250, this PR uses a time-based approach:

  • Track timestamp when state changes occur
  • Allow animation within 500ms after state change (for smooth UX)
  • Skip animation outside this window (for performance)

This achieves both smooth state transition animations AND fast layout performance, as suggested by reviewers.

Implementation

  • Added stateChangeTimestamp to track state change timing
  • Modified onBoundsChange() to check time window
  • Maintains backward compatibility and all existing optimizations

Test

  • Verified smooth corner animations in MaterialButtonGroup during state changes
  • Confirmed no performance regression on screen rotation
  • Tested initial layout performance remains optimal

Fixes #4990

Fix regression introduced in ea9d250 where corner morph animations
in MaterialButtonGroup were interrupted.

The issue was that onBoundsChange() always skipped animations by
passing `skipAnimation=true` to updateShape(). This affected state-only
changes (like button press) where bounds don't actually change.

Restored the boundsIsEmpty logic from 1.14.0-alpha06:
- Skip animation only on first non-empty bounds (initial layout)
- Allow animations for subsequent state changes (smooth UX)

Fixes material-components#4990
@jayyaj12
Copy link
Author

Hi @dsn5ft, I'm checking in on this PR. I've already verified the fix through local testing and confirmed it restores the corner animation behavior as expected.

Since there hasn't been any feedback from @pekingme regarding a 'better way' for a while, I suggest moving forward with this approach to address the regression in the current alpha version.

Could you please review this or let me know if we should wait further?

@dsn5ft
Copy link
Contributor

dsn5ft commented Jan 21, 2026

The issue is that this PR as is reintroduces the issue fixed by ea9d250 right?

I believe @pekingme has been thinking about an update to fix both issues.

@dsn5ft
Copy link
Contributor

dsn5ft commented Jan 21, 2026

The solution being a flag in MaterialShapeDrawable that helps differentiate corner animations triggered by state change vs bound change.

…maintaining performance.

After ea9d250, corner morph animations in MaterialButtonGroup were interrupted
during state changes because onBoundsChange() always skipped animations. This
caused abrupt visual transitions when buttons were pressed or focused.

Simply reverting would reintroduce unnecessary animations during layout changes
(screen rotation, window resize), hurting performance.

Solution: Use time-based approach to distinguish change types:
- Track timestamp when state changes occur (onStateChange)
- Allow animation for 500ms after state change
- Skip animation for pure layout changes (outside time window)

This maintains both smooth state transition UX and layout change performance.

Fixes material-components#4990
@jayyaj12 jayyaj12 changed the title [Shape] Restore alpha06 corner animation behavior [Shape] Fix corner animation interruption during state changes while maintaining performance Jan 26, 2026
@jayyaj12
Copy link
Author

Updated the implementation based on feedback!

Instead of simply reverting to boundsIsEmpty, I've implemented a time-based approach to distinguish state changes from layout changes.

I've also updated the PR description to reflect this new approach. Please take a look at the updated implementation. Thanks!

@dsn5ft @pekingme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Button] Corner morph animation broken in ButtonGroup

3 participants